<template>
    <div class="BookingManagement">

        <!-- 版心 -->
        <div class="Booking_wrap">

             <!-- 头部 -->
      <div class="header">
        <div class="header_top">
         <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
        </div>

        <div class="header_bottom">
          <div class="header_left">
            <div class="header_name">
              场馆名称：
              <span>奥德健身蜗牛旗舰店</span>
            </div>

            <div class="header_number" style="margin-left:100px;">
              预约人数：
              <span>32</span>
            </div>

            <div class="header_number">
              实际上课数：
              <span>28</span>
            </div>
          </div>

          <div class="header_right">
           <el-button type="info" round>筛选取消预约</el-button>

           
          </div>
        </div>
      </div>

      <!-- 头部结束 -->

       <!-- 表格 -->

<el-table
    :data="tableData"
   :row-class-name="tableRowClassName" 
    >
    <el-table-column
      type="index"
      label="序号"
    width="120"
    
      :index="indexMethod"
      
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="用户姓名"
      width="200"
     >
    </el-table-column>
     <el-table-column
      prop="phone"
      label="手机号"
     >
    </el-table-column>
     <el-table-column
      prop="class"
      label="预约课程"
      >
    </el-table-column>
    <el-table-column
      prop="status"
      label="身份"
      >
    </el-table-column>
     <el-table-column
      prop="price"
      label="价格"
      >
    </el-table-column>
    <el-table-column
      prop="state"
      label="预约状态"
     >
    </el-table-column>
    
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          style="color:#fff;background:#2f7dfe;"
          @click="handleEdit(scope.$index, scope.row)">已到店</el-button>
      </template>
    </el-table-column>
  </el-table>
  
           <!-- 表格结束 -->

        </div>
        <!-- 版心结束 -->


    </div>
</template>
<script>
export default {
    data(){
        return{
             options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        tableData: [{
          name: '魏术超',
          phone:'15135934855',
          class:'动感单车',
          status:'VIP年卡',
          price:'￥49',
          state: '已预约',
        }, {
          name: '李四',
           phone:'15135934855',
          class:'搏击操',
          status:'普通用户',
          price:'￥125',
         state: '取消预约',
        }, {
          name: '张三',
           phone:'15135934855',
            class:'器械训练',
          status:'VIP月卡',
          price:'￥49',

         state: '取消预约',
        }, {
          name: '王五',
           phone:'15135934855',
            class:'搏击操',
          status:'VIP年卡',
          price:'￥125',

         state: '已预约',
        }],
        value1:''

        }
    },
    methods:{
   indexMethod(index) {
        return index * 1;
      },
       handleEdit(index, row) {
        console.log(index, row);
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    }
  
}
</script>
<style>
    .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<style scoped>

.BookingManagement{
 width: 100%;
  height: 100%;
  background: #f2f2f2;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 2;
}
/* 版心 */
.Booking_wrap{
 width: 100%;

  height: 100%;

  margin-left: 3%;
}
.Booking_wrap .header {
  width: 100%;

  margin-top: 35px;
}

.Booking_wrap .header .header_top .el-input{
    width: 8%;
    

}

.Booking_wrap .header .header_bottom {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 30px;

  padding-bottom: 20px;

  border-bottom: 1px solid #cdcdcd;
}

.Booking_wrap .header .header_bottom .header_left {
  font-size: 16px;

  color: #000000;

  display: flex;

  align-items: center;
}

.el-date-editor {
  width: 100%;
}

.el-date-editor {
  line-height: 35px;
}

.el-select {
  width: 100%;
}

.Booking_wrap .header .header_bottom .header_name {
  font-size: 15px;

  color: #000000;
  display: flex;
  align-items: center;
}
.Booking_wrap .header .header_bottom .header_name .el-select{
    width: 65%;
}
.Booking_wrap .header .header_bottom .header_name span {
  color: #286fe6;
}

.Booking_wrap .header .header_bottom .header_number {
  font-size: 15px;

  color: #000000;

  margin-left: 26px;
}

.Booking_wrap .header .header_bottom .header_number span {
  color: #286fe6;
}

.Booking_wrap .header .header_bottom .header_right {
  display: flex;

  align-items: center;

  padding-right: 30%;
}
.Booking_wrap .header .header_bottom .header_right .el-button{
    height: 32px;
    line-height: 35px;
    padding: 0 15px;
    background: #aaaaaa;
    border: none;
    outline: none;
}
/* 版心结束 */
/* 表格 */
.el-table{
    width: 80%;
    margin-top: 20px;

}
.el-table tr th{
text-align: center!important;
}
</style>


